<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>查看账本</title>
    <link href="/semantic-ui/semantic.css" rel="stylesheet" type="text/css">
    <script src="/semantic-ui/jquery-3.5.1.js"></script>
    <script src="/semantic-ui/semantic.js"></script>
</head>
<body>
<div class="ui container">
    <div class="ui attached segment">
        <form th:action="@{/ledger}" method="post" style="display: inline-block !important;">
            <div class="ui action input">
                <input type="date" name="time" placeholder="输入时间查询">
                <button class="ui icon button">
                    <i class="search icon"></i>
                </button>
            </div>
        </form>
        <a th:href="@{/addledger}" class="ui primary button" style="margin-left: 30px !important;">新增</a>
        <h1 style="position: absolute; top: 50%; right: 50%; transform: translateY(-100%);">家庭记账本</h1>
        <a th:href="@{/usertable}" class="ui basic button"
           style="position: absolute; top: 50%; right: 20px; transform: translateY(-50%);"><i class="icon user"></i>查看用户</a>
        <a th:href="@{/yearMoney}" class="ui blue basic button"
           style="position: absolute; top: 50%; right: 150px; transform: translateY(-50%);">年度总结</a>
        <a th:href="@{/monthMoney}" class="ui blue basic button"
           style="position: absolute; top: 50%; right: 260px; transform: translateY(-50%);">月份总结</a>
        <a th:href="@{/login}" class="ui red basic button"
           style="position: absolute; top: 50%; right: 370px; transform: translateY(-50%);">注销</a>
    </div>
    <table class="ui celled attached table" style="margin-top: 40px !important;">
        <thead>
        <tr>
            <th>时间</th>
            <th>收支名称</th>
            <th>收支类型</th>
            <th>金额</th>
            <th>银行账户</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="ledger : ${page.list}">
            <td th:text="${ledger.time}">时间</td>
            <td th:text="${ledger.IEName}">收支名称</td>
            <td th:text="${ledger.IorE}">收支类型</td>
            <td th:text="${ledger.Money}">金额</td>
            <td th:text="${ledger.CardBank}">银行卡帐户</td>
            <td th:text="${ledger.beizhu}">备注</td>
            <td>
                <div class="ui large buttons">
                    <a th:href="@{/demo}">
                        <button class="ui button">修改</button>
                    </a>
                    <div class="or"></div>
                    <a th:href="@{/demo}">
                        <button class="ui positive button">删除</button>
                    </a>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="ui attached segment" >
        <table class="m-mobile-wide" width="425px">
            <tbody>
            <tr align="center">
                <td>
                    <a th:href="@{/ledger(pageNum=${page.pageNum}-1)}"  class="ui button basic mini" th:unless="${page.isFirstPage}">上一页</a>
                </td>
                <td>
                    第
                    <h8 th:text="${page.pageNum}">2</h8>
                    页/共
                    <h8 th:text="${page.pages}">4</h8>
                    页
                    共
                    <h8 th:text="${page.total}">29</h8>
                    条
                </td>
                <td>
                    <form name="pageForm" th:action="@{/ledger}" method="get">
                        <div class="ui mini input ">
                            <input type="text" class="m-bg" name="pageNum" placeholder="页码" style="width: 50px!important; height: 27.76px!important;" required>
                            <button type="submit" style="font-size: 11px!important;width: 30px!important; height: 0px!important; border: none;margin: 5px;padding: 0;" class="button mini">
                                跳转
                            </button>
                        </div>
                    </form>
                </td>
                <td> &nbsp;</td>
                <td  style="float: right">
                    <a th:href="@{/ledger(pageNum=${page.pageNum}+1)}" class="ui button basic mini " style="float: right;" th:unless="${page.isLastPage}">下一页</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="ui success  message" th:unless="${#strings.isEmpty(message)}">
        <i class="close icon"></i>
        <div class="header">提示：</div>
        <p th:text="${message}"></p>
    </div>
</div>
<script>
    $(".message .close").on('click', function () {
        $(this).closest(".message")
            .transition("fade");
    })
</script>
</body>
</html>